<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="<%=getServletContext().getContextPath()%>" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MCE|Login</title>
    <link rel="stylesheet" href="${contextPath }/resources/css/mce.css"></link>
    <link rel="stylesheet" href="${contextPath }/resources/css/size.css" ></link>
    <link rel="stylesheet" href="${contextPath }/resources/css/jquery-ui.css" ></link>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,300,700,400italic' rel='stylesheet' type='text/css' ></link>
    <script type="text/javascript" src="${contextPath }/resources/js/jquery/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/jquery-ui/jquery-ui.js"></script>
    <script type="text/javascript" src="${contextPath }/resources/js/validation/validation.js"></script>
    
    <script type="text/javascript" src="${contextPath }/resources/js/client/Login.js"></script>
</head>
<body>
    <div class="mceContainer">
        <!--HOME BANNER CONTAINER-->
        <div class="beforeHeaderContainer">
            <!--NAVIGATION MENU-->
            <div class="navigationContainer">
                <table class="menuItemContainer">
                    <tr>
                        <!--MCE WEBSITE LINK-->
                        <td class="wd_90">
                            <a class="mceinc" target="_blank" href="http://www.mceinc.com">
                                <img src="${contextPath }/resources/images/element.png"></img>
                            </a>
                        </td>                        
                        <!--MCE WEBSITE LINK-->
                        <!--CONTACT LINK-->
						<td class="wd_90 menuLink"><a href="${contextPath }/contact">Contact</a></td>
						<!--/CONTACT LINK-->
                        <td class="logo">
                            <a target="_blank" href="http://www.mceinc.com">
                                <img src="${contextPath }/resources/images/MCE-Mainsite-Icon.png" ></img>
                            </a>
                        </td>
                        <!--/MCE WEBSITE LINK-->
                    </tr>
                </table>
            </div>
            <!--/NAVIGATION MENU-->
        </div>
        <!--/HOME BANNER CONTAINER-->
        <!--MAIN CONTAINER-->
        <div class="mainContainer">
            <table class="wrapContainer">
                <tr>
                    <td class="left">
                        <!--LEFT CONTAINER-->
                        <div class="wrapDataContainer borderRight">
                            <p class="subject">Sign In</p>
                            <p>To sign in, please enter your username and password and then click Submit. </p>
                            <br />
                            <c:url value="/create-new-account" var="create_new_account"/>
 							<a href="<c:out value='${create_new_account}'/>" class="mceLinkAction">Create New Acccount</a>
                        </div>
                        <!--/LEFT CONTAINER-->
                    </td>
                    <td>
                        <!--BODY CONTAINER-->
                        <div class="wrapDataContainer">
                        	<form action="mce-account" method="post" onsubmit="return loginValidation();" style="margin-left: 50px;">
                        		<!--MESSAGE-->
                                <div class="wrap-item-container" style="width: 350px;">
                                    <div id="messageContent" class="wrap-message-container error">
                                        <span class="ico"></span>
                                        Please fill all required fields highlighted in red
                                    </div>
                                </div>
                                <br/>
                                <!--/MESSAGE-->
                                <!--USERNAME INPUT-->
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap">User Name<span class="required">*</span></div>
                                        <div class="field-wrap">
                                            <table class="mce">
                                            	<tr>
                                            		<td><input type="text" id="username"  name="email" class="mce wd_220"></input></td>
                                            		<td class="wd_14"><p class="span-error-ico" title="User Name is required"></p></td>
                                            	</tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <div class="label-wrap">Password<span class="required">*</span></div>
                                        <div class="field-wrap"> 
                                            <table class="mce">
                                            	<tr>
                                            		<td><input type="password" id="password" name="password" class="mce wd_220"></input></td>
                                            		<td class="wd_14"><p class="span-error-ico" title="Password is required"></p></td>
                                            	</tr>
                                            </table>                             
                                        </div>
                                    </div>
                                </div>
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <input id="remember" type="checkbox" />
                                        <label for="remember">Remember Me</label>
                                    </div>
                                </div>
                                <div class="wrap-item-container wd_445">
                                   <div class="buttonContainer" style="margin-top:0px;">
                                   	<input style="float:none;" type="submit" class="mce" value="SUBMIT" />
                                   </div>
                                </div>
                                <div class="wrap-item-container wd_445">
                                    <div class="html-control-container">
                                        <c:url value="/forgot-username-password" var="forgotUsernamePassword"/>
 										<a href="<c:out value='${forgotUsernamePassword}'/>" class="mce italic" style="margin-left: 0px;">Forgot Username/Password?</a>
                                    </div>
                                </div>
                                <!--/USERNAME INPUT-->
                        	</form>

                        </div>
                        <!--/BODY CONTAINER-->
                    </td>
                    <td class="right">
                        <!--RIGHT CONTAINER-->
                       <%@include file="right-include/right.jsp" %>
                        <!--/RIGHT CONTAINER-->
                    </td>
                </tr>
            </table>
        </div>
        <!--/MAIN CONTAINER-->
        <!--FOOTER CONTAINER-->
        <div class="footerContainer">
            <img src="${contextPath }/resources/images/Nidec.jpg" />
            <img src="${contextPath }/resources/images/MCE.jpg" />
            <div class="clearBoth" />
            <p class="copyRight">Copyright 2014 Motion Control Engineering. All Rights Reserved</p>
        </div>
        <!--/FOOTER CONTAINER-->
    </div>

</body>
</html>